<template>
  <div>
    <CategorySelector
      :disabled="currentViewType !== VIEW_TYPE.LIST"
    ></CategorySelector>
    <el-card style="margin-top: 20px">
      <SPUList
        v-if="currentViewType === VIEW_TYPE.LIST"
        @change-view="changeViewHandler"
      ></SPUList>
      <SPUForm
        :data="spuData!"
        v-if="currentViewType === VIEW_TYPE.SPU_FORM"
        @change-view="changeViewHandler"
      ></SPUForm>
      <SKUForm
        :data="spuData!"
        v-if="currentViewType === VIEW_TYPE.SKU_FORM"
        @change-view="changeViewHandler"
      ></SKUForm>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "ProductSPU",
});
</script>
<script lang="ts" setup>
import CategorySelector from "@/components/CategorySelector/index.vue";

import SPUList from "@/views/product/spu/list/index.vue";
import SPUForm from "@/views/product/spu/spuForm/index.vue";
import SKUForm from "@/views/product/spu/skuForm/index.vue";
import VIEW_TYPE from "@/views/product/spu/vueTypes";
import type { ISPU } from "@/api/spu";
//当前视图的类型
const currentViewType = ref(VIEW_TYPE.LIST);
//接收编辑的时候SPU数据
const spuData = ref<ISPU>();
//监听子组件的change-view事件 切换视图
function changeViewHandler(ViewType: VIEW_TYPE, data: ISPU) {
  currentViewType.value = ViewType;
  if (data) {
    spuData.value = data;
  }
}

/**
 * 控制 SPUList、SPUForm、SKUForm 显示
 * 通过不同的值映射不同表现：枚举
 */

/**
 * 枚举的使用
 * 我们有些时候需要根据不同的状态做不同事情
 * http状态码、业务码
 * 业务码
 *  0: 成功
 *  1: 用户名不能为空
 *  2: 密码不能为空
 *  3: 密码错误
 */
// const resCode = 0;
//硬编码
// if (resCode == 0) {
//   //
// }
// if (resCode == 1) {
//   //
// }
// if (resCode == 2) {
//   // 密码错误的相关逻辑
// }
// 上述的硬编码的方式不利于后期的维护，修改
// 定义一个对象，key-value 映射 resCode 值和对应业务
// const status = {
//   success: 0,
//   usernameIsEmpty: 1,
//   passwordIsEmpty: 2,
//   passwordIsError: 3,
// };
// 我们可以使用 ts 中枚举结构来定义
// enum 关键字 定义枚举变量
// enum status {
//   success = 0,
//   usernameIsEmpty = 1,
//   passwordIsEmpty = 2,
//   passwordIsError = 3,
// }
// 枚举的值，默认从0开始，后续会自增
// 会同时对key，value生成正反两套映射
// enum 不仅仅只是生成了类型，还生成了值，还有一个也有这样的特性：class
// enum status {
//   success, //0
//   usernameIsEmpty, //1
//   passwordIsEmpty, //2
//   passwordIsError = 13, //3
//   usernameIsError, // 如果不设置值，那么值就是上一个值累加+1 //14
// }
// // 值还可以是字符串
// abc = "atguigu";
// class A {}
//
// interface B {}
//
// function Fn() {}
//
// console.log(`status`, status);
//
// console.log(status.success, status[0]);
//
// let a: status; // status 是类型
// let b = status;
// let c: A;
// let d = new A();
// let e: B;
// // let f = B;
// let g: typeof Fn;
// let h = Fn;
//
// if (resCode == status.success) {
// }
// if (resCode == status.usernameIsEmpty) {
// }
// if (resCode == status.passwordIsError) {
//   // 密码错误的相关逻辑
// }
</script>
